/*!
 * ---------------------------------------------------------------------
 *
 * GLPI - Gestionnaire Libre de Parc Informatique
 *
 * http://glpi-project.org
 *
 * @copyright 2015-2024 Teclib' and contributors.
 * @copyright 2003-2014 by the INDEPNET Development Team.
 * @licence   https://www.gnu.org/licenses/gpl-3.0.html
 *
 * ---------------------------------------------------------------------
 *
 * LICENSE
 *
 * This file is part of GLPI.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * ---------------------------------------------------------------------
 */

:root {
    --tblr-primary-rgb: 254, 201, 92;
    --tblr-primary: rgb(var(--tblr-primary-rgb));
    --tblr-primary-fg: #1e293b;
    --tblr-secondary: #606f91;
    --tblr-secondary-fg: var(--tblr-body-bg);
    --tblr-info: #80abe4;
    --tblr-link-color-rgb: 58, 86, 147;
    --tblr-link-color: rgb(var(--tblr-link-color-rgb));
    --tblr-badge-bg: var(--tblr-secondary);
    --tblr-badge-color: var(--tblr-secondary-fg);
    --tblr-navbar-color: #2f3f64;
    --tblr-body-bg: #f5f7fb;
    --tblr-bg-surface: #fff;
    --tblr-bg-surface-tertiary: var(--tblr-gray-50);
    --tblr-bg-surface-dark: color-mix(in srgb, var(--tblr-bg-surface), var(--tblr-dark) 1.5%);
    --glpi-tabs-bg: color-mix(in srgb, var(--tblr-bg-surface), black 1.5%);
    --glpi-tabs-fg: var(--tblr-muted);
    --glpi-tabs-border-color: var(--tblr-border-color);
    --glpi-tabs-active-bg: var(--tblr-bg-surface);
    --glpi-tabs-active-fg: var(--tblr-body-color);
    --glpi-tabs-active-border-color: var(--glpi-tabs-border-color);
    --glpi-logo-light: url("../pics/logos/logo-GLPI-100-white.png");
    --glpi-logo-light-reduced: url("../pics/logos/logo-G-100-white.png");
    --glpi-logo-dark: url("../pics/logos/logo-GLPI-100-black.png");
    --glpi-logo-dark-reduced: url("../pics/logos/logo-G-100-black.png");
    --glpi-logo-dark-login: url("../pics/logos/logo-GLPI-250-black.png");
    --glpi-logo-light-login: url("../pics/logos/logo-GLPI-250-white.png");
    --glpi-logo: var(--glpi-logo-light);
    --glpi-logo-reduced: var(--glpi-logo-light-reduced);
    --glpi-mainmenu-bg: #2f3f64;
    --glpi-mainmenu-fg: #f4f6fa;
    --glpi-mainmenu-active-bg: color-mix(in srgb, var(--glpi-mainmenu-bg), white 45%);
    --glpi-search-bg: color-mix(in srgb, var(--glpi-mainmenu-bg), transparent 95%);
    --glpi-search-fg: color-mix(in srgb, var(--glpi-mainmenu-fg), white 5%);
    --glpi-search-border-color: color-mix(in srgb, var(--glpi-search-fg), white 65%);
    --glpi-fg-secondary: #f4f6fa;
    --glpi-badge-bg: color-mix(in srgb, var(--tblr-link-color), var(--tblr-light) 91%);
    --glpi-badge-fg: var(--tblr-link-color);
    --glpi-form-header-fg: var(--tblr-blue);
    --glpi-form-header-bg: color-mix(in srgb, var(--glpi-form-header-fg), var(--tblr-bg-surface) 90%);
    --glpi-form-header-border-color: color-mix(in srgb, var(--glpi-form-header-fg), var(--tblr-bg-surface) 75%);
    --glpi-form-header-danger-fg: var(--tblr-danger);
    --glpi-form-header-danger-bg: color-mix(in srgb, var(--glpi-form-header-danger-fg), var(--tblr-bg-surface) 90%);
    --glpi-form-header-danger-border-color: color-mix(in srgb, var(--glpi-form-header-danger-fg), var(--tblr-bg-surface) 75%);
    --glpi-form-toolbar-bg: #f5f5f5;
    --glpi-topbar-height: 79px;
    --glpi-contextbar-height: 56px;
    --glpi-content-margin: 24px;
    --glpi-scrollbar-thumb-color: color-mix(in srgb, var(--tblr-secondary), transparent 20%);
    --glpi-scrollbar-track-color: transparent;
    --glpi-itil-secondary-bg: #f5f5f5;
    --glpi-timeline-itil-content-bg: #e2f2e3;
    --glpi-timeline-itil-content-fg: #155210;
    --glpi-timeline-itil-content-border-color: #87aa8a;
    --glpi-timeline-fup-bg: #ececec;
    --glpi-timeline-fup-fg: #535353;
    --glpi-timeline-fup-border-color: #b3b3b3;
    --glpi-timeline-task-bg: #ffe8b9;
    --glpi-timeline-task-fg: #38301f;
    --glpi-timeline-task-border-color: #e5c88c;
    --glpi-timeline-solution-bg: #9fd6ed;
    --glpi-timeline-solution-fg: #27363b;
    --glpi-timeline-solution-border-color: #90c2d8;
    --glpi-timeline-document-bg: #80cead;
    --glpi-timeline-document-fg: #21352c;
    --glpi-timeline-document-border-color: #68b997;
    --glpi-timeline-log-bg: #cacaca21;
    --glpi-timeline-badge-bg: rgba(97, 97, 97, 15%);
    --glpi-timeline-badge-fg: rgba(43, 43, 43, 80%);
    --glpi-hover-bg: rgba(var(--tblr-secondary-rgb), .08);
    --tblr-gray-100: var(--tblr-light);
    --tblr-gray-200: color-mix(in srgb, var(--tblr-light), var(--tblr-dark) 4%);
    --tblr-gray-300: color-mix(in srgb, var(--tblr-light), var(--tblr-dark) 6%);
    --tblr-gray-400: color-mix(in srgb, var(--tblr-light), var(--tblr-dark) 12%);
    --tblr-gray-500: color-mix(in srgb, var(--tblr-light), var(--tblr-dark) 22%);
    --tblr-gray-600: color-mix(in srgb, var(--tblr-light), var(--tblr-dark) 40%);
    --tblr-gray-700: color-mix(in srgb, var(--tblr-light), var(--tblr-dark) 64%);
    --tblr-gray-800: color-mix(in srgb, var(--tblr-light), var(--tblr-dark) 84%);
    --tblr-gray-900: var(--tblr-dark);
    --tblr-gray-50: var(--tblr-gray-200);
    --animate-duration: 0.3s !important; // No prefix because it is overrides animate.js default
    --glpi-zindex-dropdown: $zindex-dropdown;
    --glpi-zindex-sticky: $zindex-sticky;
    --glpi-zindex-fixed: $zindex-fixed;
    --glpi-zindex-offcanvas-backdrop: $zindex-offcanvas-backdrop;
    --glpi-zindex-offcanvas: $zindex-offcanvas;
    --glpi-zindex-modal-backdrop: $zindex-modal-backdrop;
    --glpi-zindex-modal: $zindex-modal;
    --glpi-zindex-popover: $zindex-popover;
    --glpi-zindex-tooltip: $zindex-tooltip;
    --glpi-zindex-toast: $zindex-toast;
}

@media(prefers-reduced-motion) {
    :root {
        --animate-duration: 0s !important; // No prefix because it is overrides animate.js default
    }
}

body.iframed,
body.in_modal {
    background-color: transparent;
    overflow-x: hidden;
}

.page {
    .glpi-logo {
        background: var(--glpi-logo) no-repeat;
        height: 55px;
        width: 100px;
    }

    .page-body {
        margin-bottom: 0;
    }

    .footer {
        font-size: 0.75rem;
        padding: 0.5em;
    }
}

.breadcrumb a {
    --tblr-breadcrumb-link-color: var(--tblr-muted);
}

.breadcrumb-alternate {
    a {
        &:hover {
            text-decoration: var(--tblr-link-hover-decoration);
        }
    }
}

.dropdown-item {
    & > .fas:first-child,
    & > .fa-solid:first-child,
    & > .far:first-child,
    & > .fa-regular:first-child,
    & > .fab:first-child,
    & > .fa-brands:first-child,
    & > .ti:first-child {
        margin-right: 0.5em;
    }
}

.ti {
    font-size: 1.25em;
    text-align: left;

    &.fa-fw {
        width: 0.9em;
    }

    &.fa-xs {
        font-size: 0.85em;
    }

    &.fa-lg {
        font-size: 1.8em;
        line-height: 0.75em;
        vertical-align: -0.0667em;
    }

    &.fa-2x {
        font-size: 2.3em;
        vertical-align: bottom;
    }
}

.btn {
    .btn-group .select2-container ~ & {
        max-width: 25px;
    }

    a {
        color: inherit;
    }

    i.fas,
    i.fa-solid,
    i.far,
    i.fa-regular,
    i.fab,
    i.fa-brands,
    i.ti,
    .fa-stack {
        margin-inline-start: 0;

        & + * {
            margin-left: 0.25rem;
        }
    }

    &.btn-icon {
        i.fas,
        i.fa-solid,
        i.far,
        i.fa-regular,
        i.fab,
        i.fa-brands,
        i.ti {
            margin-right: 0;

            &:not(.ti) {
                line-height: 1.5em;
            }
        }

        &.btn-sm {
            .fa-stack {
                height: 1.65em;
                line-height: 1.2em;
                width: 1.8em;
                margin-top: -2px;
                font-size: 0.8em;

                @include media-breakpoint-down(sm) {
                    width: 1.4em;
                }
            }

            i.fas,
            i.fa-solid,
            i.far,
            i.fa-regular,
            i.fab,
            i.fa-brands {
                line-height: 1.2em;
            }
        }
    }
}

.toast-container {
    z-index: 999999;
    position: fixed;

    &.top-left {
        inset: 0 auto auto 0;
    }

    &.top-right {
        inset: 0 0 auto auto;
    }

    &.bottom-left {
        inset: auto auto 0 0;
    }

    &.bottom-right {
        inset: auto 0 0 auto;
    }
}

.img-overlay-wrapper {
    width: fit-content;
}

.page-anonymous {
    .glpi-logo {
        --logo: var(--glpi-logo-dark-login);

        content: var(--logo);
        width: 200px;
        height: 110px;
    }

    .main-content-card {
        .card-header:empty {
            display: none;
        }
    }
}

table {
    tbody:not(:has(tr)) {
        display: none; // hide empty `tbody`
    }

    td.active,
    td.tab_bg_4 {
        background-color: var(--tblr-table-active-bg);
        color: var(--tblr-table-active-color);
    }

    &.deleted-results {
        & > :not(caption) > * > * {
            box-shadow: none; // override tabler for deleted results
        }
    }
}

.glpi-badge {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: var(--glpi-badge-bg);
    color: var(--glpi-badge-fg) !important;
    padding: calc(0.25rem - 1px) 0.25rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.7rem;
}

.entity_tree {
    width: 450px;
    max-width: 85vw;
    position: relative;

    table {
        width: 100%;
    }

    .fancytree-expander,
    .fancytree-icon {
        margin-top: 5px;
    }

    .fancytree-folder {
        .fancytree-title {
            font-weight: bold;
        }
    }

    .fancytree-selected {
        background-color: var(--tblr-primary);
    }
}

.qtip-bootstrap,
.popover .popover-body {
    background-color: var(--tblr-bg-surface);
    color: var(--tblr-dark);
}

.popover .popover-arrow::after {
    border-top-color: var(--tblr-bg-surface);
}

kbd {
    white-space: nowrap;
}

body,
body input {
    font-variant-ligatures: no-contextual;
}

/** Bootstrap visibility classes (The utility class behavior is different in _styles.scss) */
.bs-visible {
    visibility: visible !important;
}

.bs-invisible {
    visibility: hidden !important;
}

&:-webkit-autofill {
   -webkit-text-fill-color: var(--tblr-body-color);
}

body .dropdown-menu {
    --tblr-dropdown-divider-margin-y: calc(var(--tblr-spacer) * 0.5);
    --tblr-dropdown-item-padding-x: var(--tblr-spacer);
    --tblr-dropdown-item-padding-y: calc(var(--tblr-spacer) * 0.5);
}

body .toast {
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
}

.card {
    --tblr-card-cap-bg: color-mix(in srgb, var(--tblr-bg-surface), black 1.5%) !important;
}

.accordion {
    --tblr-accordion-color: var(--tblr-muted);
}

.monaco-editor {
    outline: none !important;
}

.tooltip {
    --tblr-tooltip-color: var(--tblr-body-color);
}
